<template>
  <view class="container pb-15 pt-15">
    <scroll-view :scroll-x="true" enable-flex enhanced :show-scrollbar="false" class="card-btn">
      <template v-if="contactWay">
        <view class="card-btn-item" @click="makePhoneCall(contactWay.phone)">
          <image
            class="card-btn-item--icon"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-5.png"
            mode="scaleToFill"
          />
          <view>
            <view class="card-btn-item--label">联系电话</view>
            <view class="card-btn-item--content">{{ contactWay.phone }}</view>
          </view>
        </view>
        <view class="card-btn-item" @click="setClipboardData(contactWay.wechatId)">
          <image
            class="card-btn-item--icon"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-11.png"
            mode="scaleToFill"
          />
          <view>
            <view class="card-btn-item--label">个人微信</view>
            <view class="card-btn-item--content">{{ contactWay.wechatId }}</view>
          </view>
        </view>
        <view class="card-btn-item" @click="setClipboardData(contactWay.email)">
          <image
            class="card-btn-item--icon"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-10.png"
            mode="scaleToFill"
          />
          <view>
            <view class="card-btn-item--label">联系邮箱</view>
            <view class="card-btn-item--content">{{ contactWay.email }}</view>
          </view>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { getContactInformation } from '@/api/order';
  import type { GetContactInformationResult } from '@/api/order/types';
  import { Toast } from '@/utils';
  import { propTypes } from '@/utils/propTypes';
  import { onMounted, ref } from 'vue';

  const props = defineProps({
    memberLeadingId: propTypes.number.isRequired,
  });

  const contactWay = ref<GetContactInformationResult>({
    phone: '',
    email: '',
    wechatId: '',
  });

  onMounted(() => {
    getContactInformation(props.memberLeadingId).then((r) => {
      contactWay.value = r;
    });
  });

  /** 拨打电话 */
  function makePhoneCall(phoneNumber?: string) {
    if (phoneNumber) {
      uni.makePhoneCall({ phoneNumber });
    }
  }

  /** 复制内容 */
  function setClipboardData(text?: string) {
    if (text) {
      uni.setClipboardData({
        data: text,
        success: () => Toast('复制成功', 'success', 1500),
      });
    }
  }
</script>

<style scoped lang="scss">
  .container {
    background-color: #fff;
    .card-btn {
      display: flex;
      height: 115rpx;
      width: 100vw;
      &-item {
        width: max-content;
        height: inherit;
        background: linear-gradient(141deg, #fff4dc 0%, #fffbf3 100%);
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        padding-left: 15rpx;
        padding-right: 30rpx;
        margin-left: 30rpx;
        &--icon {
          width: 62rpx;
          height: 62rpx;
          margin-right: 14rpx;
        }
        &--label {
          font-size: 27rpx;
          color: #333;
          margin-bottom: 5rpx;
          white-space: nowrap;
        }
        &--content {
          color: #808080;
          font-size: 23rpx;
          white-space: nowrap;
        }
      }
    }
  }
</style>
